<!--
* @description  : 反馈类型选择
* @descriptionDetail: 反馈类型选择
* @copyright    : 内蒙烟草
* @author       : zyf
* @create       : 2024-04-10 16:15:38
-->
<template>
  <view class="page">
    <theme-navbar :is-white="false" :isBack="false" backColor="#2b85e4" title="反馈类型选择">
      <view class="nav-right-icon" @tap="onSure">
        确定
      </view>
    </theme-navbar>
    <view class="content">
      <view class="header-list">
        <u-tabs :list="tabList" :is-scroll="true" :show-bar="false" :current="current" @change="change"></u-tabs>
        <u-divider bg-color="#e8e8e8" height="5" half-width="100%"></u-divider>
      </view>
      <view id="orgListContainer">
        <u-cell-group>
          <view v-for="(item, idx) in orgItems" :key="idx">
            <u-cell-item :title="item.name" :arrow="hasChild(item)" @tap="handlerItem(item)">
              <view style="margin-right: 5px;margin-top:3px;" slot="icon" @tap.prevent.stop>
                <u-icon custom-prefix="csbi-icon" size="45" name="radio" color="#2979ff" v-if="selectIds.includes(item.code)" @click="handlerSelect(item)"></u-icon>
                <u-icon custom-prefix="csbi-icon" size="45" name="kongradio" color="#b5b5b5" v-else @click="handlerSelect(item)"></u-icon>
              </view>
            </u-cell-item>
          </view>
        </u-cell-group>
      </view>
    </view>
  </view>
</template>

<script>
/**
 * 指定选择
 */
export default {
  name: "tree-select",
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      selectItems: [], // 选中项
      selectIds: [], // 选中的id
      tabList: [
        {
          name: "根节点",
          code: "",
        },
      ], // 页头滚动内容
      current: 0,
      orgItems: [],
    };
  },
  methods: {
    // 点击根节点
    handlerSelect(orgItem) {
      this.selectItems = [];
      this.selectIds = [];
      this.selectItems.push(orgItem);
      this.selectIds.push(orgItem.code);
    },
    getLabel(item) {
      console.log(item);
    },
    hasChild(itm) {
      return itm && itm.children && itm.children.length > 0;
    },
    // 点击选中项
    handlerItem(orgItem) {
      if (!orgItem.children || orgItem.children.length <= 0) {
        return;
      }
      let array = [
        {
          name: "根节点",
          code: "",
        },
      ];
      this.tabList = array.concat(orgItem);
      this.current = this.tabList.length - 1;
      this.orgItems = orgItem.children;
    },
    // 点击确定
    onSure() {
      if (this.selectItems.length == 0) {
        this.$u.toast("请至少选择一项");
        return;
      }
      this.$emit("choose", this.selectItems[0]);
    },
    // 切换选中项
    change(index) {
      this.current = index;
      this.orgItems = this.list;
    },
  },
  mounted() {
    this.orgItems = this.list;
  },
};
</script>

<style lang="scss" scoped>
#orgListContainer {
  margin-top: 5px;
}
.nav-right-icon {
  padding-right: 15px;
  color: #fff;
}
/deep/ .u-tab-item {
  max-width: 160px;
}
</style>
